<template>
	<div>
		<div class="table">
			<div class="crumbs">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 帖子列表</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="container">
				<div class="handle-box">
					<el-select v-model="getOrderData['type']" placeholder="选择类型" class="handle-select mr10">
						<el-option key="0" label="全部" value=""></el-option>
						<el-option key="1" label="实物" value="1"></el-option>
						<el-option key="2" label="虚拟" value="2"></el-option>
					</el-select>
					<el-select v-model="getOrderData['status']" placeholder="选择状态" class="handle-select mr10">
						<el-option key="0" label="全部" value=""></el-option>
						<el-option key="1" label="待发货" value="1"></el-option>
						<el-option key="2" label="已发货" value="2"></el-option>
						<el-option key="3" label="发货失败" value="3"></el-option>
						<el-option key="4" label="兑换完成" value="4"></el-option>
					</el-select>
					<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
				</div>
				<el-table :data="orderList" border class="table" ref="multipleTable">
					<el-table-column prop="OrderId" label="ID" width="120">
					</el-table-column>
					<el-table-column prop="OrderNo" label="订单号" width="120">
					</el-table-column>
					<el-table-column prop="GName" label="产品名字" width="120">
					</el-table-column>
					<el-table-column prop="CreateTime" label="订单状态" align="center">
						<template v-slot="scope">
							<div>{{status[scope.row.Status]}}</div>
						</template>
					</el-table-column>
					<el-table-column prop="CreateTime" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" align="center">
						<template v-slot="scope">
							<el-button type="text"  icon="el-icon-document" @click="lookDetail(scope.$index)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination background :page-size="pageSize" @current-change="handleCurrentChange" layout="prev, pager, next" :total="orderTotalCount">
					</el-pagination>
				</div>
			</div>
		</div>
		<div class="detail-box" v-show="showDetail">
			<div class="order-info">
				<div class="close" @click="closeDetail">
					<i class="el-icon-close"></i>
				</div>
				<div class="info-box">
					<div class="info-item">
						<span class="item-title">订单编号：</span>
						<span class="item-body">{{orderInfo['OrderNo'] || "无"}}</span>
					</div>
					<div class="info-item">
						<span class="item-title">礼物名字：</span>
						<span class="item-body">{{orderInfo['GName'] || "无"}}</span>
					</div>
					<div class="info-item">
						<span class="item-title">联系人：</span>
						<span class="item-body">{{orderInfo['Receiver'] || "无"}}</span>
					</div>
					<div class="info-item">
						<span class="item-title">联系电话：</span>
						<span class="item-body">{{orderInfo['ReceiverPhone'] || "无"}}</span>
					</div>
					<div class="info-item">
						<span class="item-title">联系地址：</span>
						<span class="item-body">{{orderInfo['Address'] || "无"}}</span>
					</div>
					<div class="info-item">
						<span class="item-title">邮政编码：</span>
						<span class="item-body">{{orderInfo['ZipCode'] || "无"}}</span>
					</div>
					<div class="info-item">
						<span class="item-title">创建时间：</span>
						<span class="item-body">{{orderInfo['CreateTime'] || "无"}}</span>
					</div>
					<div class="info-item">
						<span class="item-title">订单状态：</span>
						<span class="item-body">{{status[orderInfo['Status']] || "无"}}</span>
					</div>
					<div class="info-item" v-if="orderInfo['Status']==2">
						<span class="item-title">发货备注：</span>
						<span class="item-body">{{orderInfo['Content'] || "无"}}</span>
					</div>
				</div>
				<div class="ship-box" v-if="orderInfo['Status']==1">
					<el-input
					  class="ship-txt"	
					  type="textarea"
					  :rows="2"
					  placeholder="请输入发货描述,实物为物流公司/单号, 虚拟为兑换券码等"
					  v-model="shipData['content']">
					</el-input>
					<el-button type="primary" @click="goShip">发货</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
    import {getOrderList, ship} from "../../api/gift.js"
    export default {
        name: 'basetable',
        data() {
            return {
				orderIndex:'',
                schoolList:[],
                orderList:[],
                categoryList:[],
                pageSize:0,
                orderTotalCount:0,
				status:{
					 1:"待发货",
					 2:'已发货',
					 3:'发货失败',
					 4:'兑换完成'
				},
                getOrderData:{
                    Page:1,
                    PageSize:10,
					status:"",
					type:""
                },
				showDetail:false,
				orderInfo:{
					
				},
				shipData:{
					orderId:"",
					content:""
				}
            }
        },
        created() {
            this.getData();
        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.getOrderData.Page = val;
                this.getData();
            },
            // 获取 easy-mock 的模拟数据
            getData() {
                const that = this;
                getOrderList(that.getOrderData).then(res=>{
                    if(res.flag==1){
                        let newData = res.data.Results.map(order=>{
                            order.imgArr = order.GImages.split(",");
                            return order
                        });
                        this.orderList=newData;
                        this.pageSize = res.data.PageSize;
                        this.orderTotalCount = res.data.TotalCount;
                    }else{
                        this.$message({
							message:res.msg,
							type:"error"
						});
                    };
                }).catch(err=>{
                    this.$message({
						message:err.msg,
						type:"error"
					});
                });
            },
            /**
             * 搜索
             */
            search(){
                this.getData();
            },
			/**
			 * 查看详情
			 */
			lookDetail(index){
				this.orderIndex = index;
				this.orderInfo = this.orderList[index];
				this.shipData.orderId = this.orderList[index]['OrderId'];
				this.showDetail = true;
			},
			/**
			 * 关闭弹出框
			 */
			closeDetail(){
				this.shipData.orderId = "";
				this.shipData.content = "";
				this.orderIndex = "";
				this.showDetail = false;
			},
			/**
			 * 发货
			 */
			goShip(){
				const that = this;
				ship(this.shipData).then(res=>{
					if(res.flag==1){
						this.$message({
							message:"提交成功",
							type:"success"
						})
						setTimeout(()=>{
							that.orderList[that.orderIndex]['Status'] = 2;
							this.shipData.orderId = "";
							this.shipData.content = "";
							this.orderIndex = "";
							this.showDetail = false;
						},500)
					}else{
						this.$message({
							message:res.msg,
							type:"error"
						})
					}
				}).catch(err=>{
					this.$message({
						message:err.msg,
						type:"error"
					});
				});
			}
        }
    }

</script>

<style scoped>
    .el-carousel__button{
        width: 10px;
    }
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 200px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
    .source-box{
        width: 300px;
        height: 150px;
    }
    .source{
        margin:o auto;
        height: 100%;
    }
    .user-head{
        width: 60px;
        height: 60px;
    }
	.detail-box{
		width: 100%;
		height: 100%;
		position: fixed;
		top:0;
		left:0;
		background: rgba(0,0,0,0.7);
		z-index: 99;
	}
	.order-info{
		width:750px;
		height: 450px;
		position: absolute;
		top:50%;
		left: 50%;
		margin-left:-375px;
		margin-top:-225px;
		background: #fff;
		border-radius: 8px;
	}
	.close{
		position: absolute;
		top:20px;
		right: 20px;
	}
	.info-box{
		padding:50px 30px 0;
		font-size:14px;
	}
	.info-item{
		margin-bottom: 15px;
	}
	.item-title{
		display: inline-block;
		width: 70px;
		text-align: right;
		font-weight: bold;
		margin-right: 40px;
	}
	.item-body{
		color:#999;
	}
	.ship-box{
		padding:30px 30px 0;
	}
	.ship-txt{
		width: 60%;
		display: inline-block;
		margin-right: 80px;
	}
</style>
